<template>
  <div class="container">
    <div class="title">
      <h2>投诉管理</h2>
      <h5>用于管理小区里业主的投诉信息（app端来的数据）</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form ref="formComplain" :model="formComplain" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-select v-model="formComplain.community_code" placeholder="请输入">
            <el-option
              v-for="(item,index) in selectHome"
              :key="index"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投诉名称">
          <el-input v-model="formComplain.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="匿名状态">
          <el-select v-model="formComplain.status" placeholder="请输入">
            <el-option label="匿名" value="1" />
            <el-option label="不匿名" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <div class="block">
            <el-date-picker
              v-model="createTime"
              style="width: 220px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              @change="changeTime"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button style="margin-left: 10px" @click="reSet">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="40%" />
        <el-table-column prop="community.name" label="小区名称" />
        <el-table-column prop="title" label="投诉名称" />
        <el-table-column label="照片" height="100">
          <template slot-scope="{ row }">
            <img v-imgerror="require('@/assets/images/isno.png')" :src="contenctPhoto(row.an_photo)[0]" style="height:80px" alt="" @click="showImg(contenctPhoto(row.an_photo))">
          </template>
        </el-table-column>
        <el-table-column label="匿名状态">
          <template slot-scope="{row}">
            <span>{{ row.status ? '匿名' : '不匿名' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="投诉人">
          <template slot-scope="{row}">
            {{ row.status ? '匿名不予显示' : '未知' }}
          </template>
        </el-table-column>
        <el-table-column label="联系方式">
          <template slot-scope="{row}">
            {{ row.status ? '匿名不予显示' : row.tel }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="{row}">
            {{ formatTimeThis(row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="{row}">
            <el-button
              type="text"
              size="small"
              :disabled="!checkBtnPermission('/service/complain', 'update')"
              @click="edit(row.id)"
            >查看并回复</el-button>
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/service/complain', 'destroy')" @click="delInfo(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" align="middle" style="float:right;padding: 10px 0 40px 0">
        <span>第 {{ startCount }}-{{ endCount }} 条/总共 {{ count }} 条</span>
        <el-pagination
          :current-page.sync="formComplain.current"
          :page-size="formComplain.pageSize"
          layout="prev, pager, next"
          :total="count"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
    <EditComplain ref="editComplain" :seeimage1="seeImage" :dialog-show="dialogShow" :select-home="selectHome" @getData="getComplainData" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import { getSelectHome, getComplainData, getComplainDetail, delComplain } from '@/api/service'
import { parseTime } from '@/filters'
import EditComplain from './components/editCpmplain.vue'
export default {
  name: 'VueAdminTemplateMasterComplain',
  components: { EditComplain },
  data() {
    return {
      dialogShow: false,
      formComplain: {
        current: 1,
        pageSize: 10,
        community_code: '',
        title: '',
        is_anonymity: null, // 匿名
        create_time: ''
      },
      seeImage: [], // 回显图片
      count: null,
      selectHome: [],
      createTime: '',
      tableData: []// 列表数据
    }
  },
  computed: {
    startCount() {
      if (this.tableData.length) {
        return this.formComplain.current === 1 ? this.formComplain.current : (this.formComplain.current - 1) * this.formComplain.pageSize + 1
      }
      return 0
    },
    endCount() {
      if (this.tableData.length) {
        return this.formComplain.current === 1 ? this.tableData.length : (this.formComplain.current - 1) * this.formComplain.pageSize + this.tableData.length
      }
      return 0
    }
  },
  mounted() {

  },
  created() {
    this.getSelectHome()
    this.getComplainData()
  },
  methods: {
    closeDialog() {
      this.dialogShow = false
      this.seeImage = []
    },
    // 处理时间
    changeTime() {
      this.formComplain.create_time = this.createTime.join(',')
    },
    // 显示时间，转换时间
    formatTimeThis(time) {
      return parseTime(time)
    },
    handleCurrentChange(newPage) {
      this.formComplain.current = newPage
      this.initData()
    },
    // 图片预览
    showImg(viewImgList) {
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: 0,
        imgList: viewImgList
      })
    },
    // 小区名
    async getSelectHome() {
      const res = await getSelectHome()
      this.selectHome = res.data.data
    },
    async getComplainData() {
      const res = await getComplainData(this.formComplain)
      this.count = res.data.data.count
      this.tableData = res.data.data.rows
      console.log(this.tableData)
    },
    onSubmit() {
      this.getComplainData()
    },
    // 重置
    reSet() {
      this.formComplain = {
        current: 1,
        pageSize: 10,
        community_code: '',
        title: '',
        is_anonymity: null, // 匿名
        create_time: ''
      }
      this.getComplainData()
    },
    async delInfo(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delComplain(id)
      if (this.formComplain.current > 1 && this.formComplain.length === 1) {
        this.formComplain.current--
      }
      this.getComplainData()
    },
    async edit(id) {
      const res = await getComplainDetail(id)
      this.$refs.editComplain.complainForm = res.data.data
      const val = (this.$refs.editComplain.complainForm.an_photo || '').split(',')
      this.$refs.editComplain.imgList = val
      val.forEach(item => {
        this.seeImage.push({ url: 'http://124.223.14.236:8881' + item })
      })
      this.dialogShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 40px;
  .title {
    display: flex;
    align-items: center;
    h2 {
      margin-right: 20px;
    }
    h5 {
      font-weight: 400;
      color: #9c9c9d;
      vertical-align: middle;
    }
  }
  .demo-form-inline {
    display: flex;
  }
  .el-form-item {
    margin-right: 22px;
  }

  .btn {
    margin-left: 150px;
    padding-top: 40px;
    margin-right: 10px;
    ::v-deep .el-form-item__content {
      display: flex;
    }
  }
  .box-card {
    margin-bottom: 10px;
  }
  ::v-deep .el-table__row{
    height: 100px;
  }
}
</style>
